<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <title>Document</title>
    <script>
        function getTag() {
            $.ajax({
                url: "http://localhost:8080/phisoa/tag/getChildTags",
                dataType: "json",
                method: "post",
                data: {
                    "tagId": $("#selectTag1").find("option:selected").val()
                },
                success: function (data) {
                    $("#selectTag2").find("option").remove();
                    $.each(data.msg, function (index, item) {
                        $("#selectTag2").append("<option value='" + item.id + "'>" + item.name + "</option>");
                    });
                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                }
            });
        }

        function getTag2() {
            $.ajax({
                url: "http://localhost:8080/phisoa/tag/getChildTags",
                dataType: "json",
                method: "post",
                data: {
                    "tagId": $("#selectTag2").find("option:selected").val()
                },
                success: function (data) {
                    $("#selectTag3").find("option").remove();
                    $.each(data.msg, function (index, item) {
                        $("#selectTag3").append("<option value='" + item.id + "'>" + item.name + "</option>");
                    });
                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                }
            });
        }
    </script>
</head>
<body>

<form action="/phisoa/register/user" method="post" enctype="multipart/form-data" class="form form-horizontal">
    <div class="form-group">
        <label class="label label-info">感兴趣的标签</label>
        <select name="tagIds" id="selectTag1" onchange="getTag()">
            <option value="7078ac33-befe-11e8-94b3-a353b48ca080">国学文化</option>
            <option value="7078ac33-befe-11e8-94b3-a353b48ca080">国学文化</option>
        </select>
        <select name="tagIds" id="selectTag2" onchange="getTag2()">
            <!--<option value="">请选择</option>-->
        </select>
        <select name="tagIds" id="selectTag3">
            <!--<option>请选择</option>-->
        </select>
    </div>
    <div class="form-group">
        <div class="col-sm-3 col-sm-offset-3">
            <input type="submit" value="注册" class="btn btn-success btn-large">
        </div>
    </div>
</form>
</body>
</html>